<script lang="ts" setup>
import type { UploadProps } from 'ant-design-vue';

import { ref } from 'vue';

import { Page } from '@vben/common-ui';

import {
  Button,
  Image,
  Input,
  message,
  RadioButton,
  RadioGroup,
  TabPane,
  Tabs,
  Textarea,
  Upload,
} from 'ant-design-vue';

import {
  decodeQRCodeImg,
  decodeQRCodeUrl,
  generateQRCode,
} from '#/api/tools/qrcode';

const textContent = ref('hello world');
const urlValue = ref('');
const imageValue = ref();
const fileVlue = ref();
const fileList = ref<UploadProps['fileList']>([]);
const selectValue = ref('url');

const decodeQrCode = async () => {
  message.loading({
    content: '解码中...',
    duration: 0,
    key: 'qrcode',
  });
  if (selectValue.value === 'url') {
    if (urlValue.value === '') {
      message.error({ content: '请输入url!', duration: 1, key: 'qrcode' });
      return;
    }
    textContent.value = await decodeQRCodeUrl(urlValue.value);
  } else {
    const formData = new FormData();
    if (fileList.value === undefined || fileList.value[0] === undefined) {
      message.error({ content: '请选择文件!', duration: 1, key: 'qrcode' });
      return;
    }
    formData.append('file', fileList.value[0] as any);
    textContent.value = await decodeQRCodeImg(formData);
  }
  message.destroy('qrcode');
};

const generateQrCode = async () => {
  message.loading({
    content: '生成二维码中...',
    duration: 0,
    key: 'qrcode',
  });
  imageValue.value = await generateQRCode(textContent.value);
  message.destroy('qrcode');
};

const tabChange = () => {
  textContent.value = 'hello world';
  urlValue.value = '';
  fileVlue.value = undefined;
};

const handleRemove: UploadProps['onRemove'] = (file) => {
  if (fileList.value === undefined) return;
  const index = fileList.value.indexOf(file);
  const newFileList = [...fileList.value];
  newFileList.splice(index, 1);
  fileList.value = newFileList;
};
</script>

<template>
  <Page auto-content-height>
    <Tabs class="bg-background text-foreground h-full p-4" @change="tabChange">
      <TabPane key="1" tab="文本转二维码">
        <p class="mx-2 text-stone-500">Tip: 请输入URL或其他文本</p>
        <Button class="m-2" type="primary" @click="generateQrCode">
          生成二维码
        </Button>
        <div class="flex flex-row">
          <Textarea
            class="m-2 w-1/2"
            :auto-size="{ minRows: 28, maxRows: 28 }"
            v-model:value="textContent"
          />
          <div
            class="m-2 flex w-1/2 items-center justify-center rounded-md border"
          >
            <Image :src="`data:image/png;base64,${imageValue}`" />
          </div>
        </div>
      </TabPane>
      <TabPane key="2" tab="二维码解码">
        <div class="flex flex-col items-center">
          <div class="flex w-full flex-col items-center">
            <RadioGroup v-model:value="selectValue" button-style="solid">
              <RadioButton value="url">图片URL</RadioButton>
              <RadioButton value="img">上传图片</RadioButton>
            </RadioGroup>
            <div class="m-2 flex w-1/2 justify-center">
              <Input
                v-show="selectValue === 'url'"
                v-model:value="urlValue"
                placeholder="请输入图片URL"
              />
              <Upload
                v-show="selectValue === 'img'"
                :max-count="1"
                :file-list="fileList"
                :before-upload="
                  (file) => {
                    fileList = [file];
                    return false;
                  }
                "
                @remove="handleRemove"
              >
                <Button>上传文件</Button>
              </Upload>
              <Button class="bg-green-500" @click="decodeQrCode">
                确认解码
              </Button>
            </div>
          </div>
          <Textarea
            class="w-1/2"
            :auto-size="{ minRows: 28, maxRows: 28 }"
            v-model:value="textContent"
          />
        </div>
      </TabPane>
    </Tabs>
  </Page>
</template>
